<!DOCTYPE html>
<html>
<head>
	<!-- 设置浏览器不缓存 -->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
	<!-- Content-Type -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>单元考试</title>
	<style>
	.content {
		padding-left: 20px;padding-right: 20px;
	}
	.content h3{
		text-align: center;
	}
	.content label, textarea{
		float: left; width:100%;
	}
	.content textarea{
		float: left; width:100%;height:100px;
	}
	.content button {
		width:100%;height:50px;margin-top: 20px;background-color:dodgerblue;color:white;border:0px;
	}
	.perclass{
		margin-left: 10px;margin-right: 10px;
	}
	.okClass {
		color:limegreen;
	}
	.errorClass {
		color:red;
	}
	.valueClass {
		color:royalblue;
	}
	</style>
  <link rel="stylesheet" href="./plugins/element/index.css">
  <script src="./plugins/vue/vue.js"></script>
  <script src="./plugins/element/index.js"></script>
  <script src="./plugins/axios/axios.min.js"></script>
  <script src="./js/common/public.js?v=0.8.0.3"></script>

</head>
<body>
<div v-show="loaded" class="content" id="app">
<template>
	<h3>{{test.title}}</h3>
	<p><span class="perclass" v-for="item in test.personl">{{item.field}}{{item.value}}</p>
	<div v-for="(row, index1) in test.data">
		<div v-if="row.type!='textarea'">
			<H4>{{index1+1}}.{{row.title}}</H4>
			<div v-for="(poblem,index2) in row.poblems">
				<p>{{index1+1}}.{{index2+1}}.{{poblem.title}}</p>
				<div v-show="test.submit">
					<span v-if="poblem.result" class="okClass">{{poblem.message}}</span>
					<span v-else class="errorClass">{{poblem.message}}</span>
				</div>
				<div v-show="test.submit"><span class="valueClass">正确答案：{{poblem.value}}</span></div>
				<label v-for="(item, index3) in poblem.items"><input :disabled="test.submit" v-bind:type="row.type" v-bind:name="index1+''+index2" v-bind:value="item" v-model ="poblem.answer">{{item}}</label>
			</div>
		</div>
		<div v-else>
			<H4>{{index1+1}}.{{row.title}}</H4>
			<div v-for="(poblem,index2) in row.poblems">
				<p>{{index1+1}}.{{index2+1}}.{{poblem.title}}</p>
				<div v-show="test.submit"><span>答案：{{poblem.value}}</span></div>
				<textarea name="comment" id="comment" v-model ="poblem.answer"></textarea>
			</div>
		</div>
	</div>
	<div >
		<button v-on:click="submit">提交</button>
	</div>
</template>
</div>
</body>

<script type="text/javascript">
let app = new Vue({
    el: "#app",
    data() {
        return {
			loaded:false,
            test:{}
        }
    },
	methods: {
		submit() {
			for (let row of this.test.data) {
				for (let poblem of row.poblems) {
					if (this.arrEuqalse(poblem.value,poblem.answer)) {
						poblem.message="回答正确!";
						poblem.result=true;
					} else {
						poblem.message="回答错误!";
						poblem.result=false;
					}
				}
			}
			this.test.submit = true;
		},
        arrEuqalse(value, answer) {
			if (typeof(answer)=="string") {
				if (value.indexOf(answer) == -1) {
					return false;
				} else {
					return true;
				}
			} else {
				if (!value || !answer) {
					return false;
				}

				if (value.length != answer.length) {
					return false;
				}

				for (var i = 0; i < answer.length; i++) {
					if (value.indexOf(answer[i]) == -1) {
						return false;
					}
				}

				for (var i = 0; i < value.length; i++) {
					if (answer.indexOf(value[i]) == -1) {
						return false;
					}
				}
				return true;				
			}
        }
    },
	async mounted() {
		// 加载框
		const loading = this.$loading(LOAD_STYLE);

		result = await axios.get('db/train/test/abc.json');
	
		this.test = result.data.content;
		this.loaded = true;

		// 关闭加载框
		loading.close();
	}

});
	
</script>	
</html>
